<!-- 补助下发 -->
<template>
    <custom-dialog title="补助下发" size="max" @dialogClose="dialogTableClose">
        <div>
            <custom-button type="add" @addClick="addClick"></custom-button>

            <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                <el-table-column prop="fafangfangshi" label="发放方式">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.fafangfangshi" placeholder="请选择">
                            <el-option v-for="item in fsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="feiyongleibie" label="费用类别">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.feiyongleibie" placeholder="请选择">
                            <el-option v-for="item in fylbOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="zhanghuleibie" label="账户类别">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.zhanghuleibie" placeholder="请选择">
                            <el-option v-for="item in zhlbOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="buzhuxingshi" label="补助形式">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.buzhuxingshi" placeholder="请选择">
                            <el-option v-for="item in bzxsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="buzhufangshi" label="补助方式" width="250">
                    <template slot-scope="scope">
                        <el-input type="number" placeholder="请输入" style="width: 120px" v-model="scope.row.buzhufangshiValue"></el-input>
                        <el-select v-model="scope.row.buzhufangshi" placeholder="请选择" style="width: 75px">
                            <el-option v-for="item in bzfsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="buzhushijian" label="补助时间">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.buzhushijian" placeholder="请选择">
                            <el-option v-for="item in bzsjOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="sfzdxf" label="是否自动下发">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.sfzdxf" active-color="#2680FB" inactive-color="#DCEBFE"> </el-switch>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="50">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row, scope.$index)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="text-align: right; margin-top: 20px">
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="dialogTableClose">取消</el-button>
            </div>
        </div>
    </custom-dialog>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
import {editTableForm} from '@/assets/form/controlCenter/editTable'
import customButton from '@/components/customComponents/customForm/customButton'
export default {
    name: 'buZhuxiafa',
    props: {
        item: {
            type: Array,
            required: false
        }
    },
    components: {customDialog, customButton},
    data() {
        return {
            bzsjOptions: [
                {
                    value: '1',
                    label: '按学期补助'
                },
                {
                    value: '2',
                    label: '按学期补助2'
                }
            ],
            fsOptions: [
                {
                    value: '1',
                    label: '按房间'
                },
                {
                    value: '2',
                    label: '按房间2'
                }
            ],
            fylbOptions: [
                {
                    value: '1',
                    label: '学生电费'
                },
                {
                    value: '2',
                    label: '老师电费'
                }
            ],
            zhlbOptions: [
                {
                    value: '1',
                    label: '基本账户'
                },
                {
                    value: '2',
                    label: '基本账户2'
                }
            ],
            bzxsOptions: [
                {
                    value: '1',
                    label: '按用电量'
                },
                {
                    value: '2',
                    label: '按用电量2'
                }
            ],
            bzfsOptions: [
                {
                    value: '1',
                    label: '元/月'
                },
                {
                    value: '2',
                    label: '元/年'
                }
            ],
            options: [
                {
                    value: '1',
                    label: '1'
                },
                {
                    value: '2',
                    label: '2'
                }
            ],
            optionsType: [
                {
                    value: '1',
                    label: '自动保电'
                },
                {
                    value: '2',
                    label: '自动保电2'
                }
            ],
            value: '1',
            tableType: 'add',
            formTableConfig: editTableForm,
            tableItem: {
                fafangfangshi: 1,
                feiyongleibie: '1',
                zhanghuleibie: 1,
                buzhuxingshi: 1,
                buzhufangshiValue: 1,
                buzhufangshi: '1',
                buzhushijian: 1,
                sfzdxf: 1,
                id: 1
            },
            tableData: [
                {
                    fafangfangshi: '1',
                    feiyongleibie: '1',
                    zhanghuleibie: '1',
                    buzhuxingshi: '1',
                    buzhufangshiValue: '1',
                    buzhufangshi: '1',
                    buzhushijian: '1',
                    sfzdxf: '1',
                    id: 1
                },
                {
                    fafangfangshi: '1',
                    feiyongleibie: '1',
                    zhanghuleibie: '1',
                    buzhuxingshi: '1',
                    buzhufangshiValue: '1',
                    buzhufangshi: '1',
                    buzhushijian: '1',
                    sfzdxf: '1',
                    id: 2
                }
            ]
        }
    },
    computed: {},
    created() {},
    methods: {
        onSubmit() {},
        addClick() {
            var item = this.tableItem
            item.id = Math.random() * 10000
            this.tableData.push(item)
        },
        handleClick(row, index) {
            this.tableData.splice(index, 1)
        },
        formInputChange(e) {
            console.log(e)
        },
        dialogTableClose() {
            this.$emit('close', '')
        },
        tableSubmit(d) {
            console.log(d)
        }
    }
}
</script>

<style lang="scss" scoped>
.editTable {
}
</style>
